<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>菜单管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
	<link rel="stylesheet" href="${ctx }/resources/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="${ctx }/resources/easyui/themes/metro/easyui.css" />
	<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/wu.css" />
	<link rel="stylesheet" type="text/css" href="${ctx }/resources/css/icon.css" />
	<script type="text/javascript" src="${ctx }/resources/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="${ctx }/resources/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctx }/resources/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="${ctx }/resources/zTree/js/jquery.ztree.core.js"></script>
  </head>
  
  <body class="easyui-layout">
  	<div class="easyui-panel" data-options="region:'west',title:'菜单树',iconCls:'icon-node-tree32',split:true" style="width: 20%">
  		<div class="ztree" id="menuTree"></div>
  	</div>
  	<div class="easyui-panel"data-options="region:'center',title:'菜单列表',iconCls:'icon-save'" style="width: 80%">
  		 <!-- 数据表格开始 -->
  		<div style="height: 2px"></div>
	    <table id="table" class="easyui-datagrid" style="width:100%;">
	    </table>
			<div id="tb">
			<a href="javascript:void(0)" class="easyui-linkbutton" id="addMenu" data-options="iconCls:'icon-add',plain:true">添加菜单</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" id="updateMenu" data-options="iconCls:'icon-edit',plain:true">修改菜单</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" id="deleteMenu" data-options="iconCls:'icon-remove',plain:true">删除菜单</a>
			</div>
	  	</div>
	  	
	  	<!-- 添加和修改用户的弹出层 开始 -->
	<div id="dlg" class="easyui-dialog" style="width:500px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <div style="margin-bottom:10px">
            	<input type="hidden" name="id">
                <input class="easyui-combotree" name="pid" data-options="url:'${ctx }/menu/loadMenuTreeForCombotree.action?available=1',method:'get',label:'父级菜单:',labelPosition:'left'" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="name" class="easyui-textbox" required="true" label="菜单名称:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="href" class="easyui-textbox" label="菜单地址:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="icon" class="easyui-textbox" required="true"  label="菜单图标:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
                <input name="tabicon" class="easyui-textbox" required="true"  label="TAB图标:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
                <input name="target" class="easyui-textbox"  label="TARGET:" style="width:100%">
            </div>
             <div style="margin-bottom:10px">
             	<label class="textbox-label" style="text-align: left;">
        				是否父节点:
        			</label>
           			 <input class="easyui-radiobutton" name="parent" value="1">&nbsp;&nbsp;是&nbsp;&nbsp;
           			 <input class="easyui-radiobutton" name="parent" value="0">&nbsp;&nbsp;否&nbsp;&nbsp;
            </div>
            <div style="margin-bottom:10px">
             	<label class="textbox-label" style="text-align: left;">
        				是否展开:
        			</label>
           			 <input class="easyui-radiobutton" name="open" value="1">&nbsp;&nbsp;展开&nbsp;&nbsp;
           			 <input class="easyui-radiobutton" name="open" value="0">&nbsp;&nbsp;不展开&nbsp;&nbsp;
            </div>
            <div style="margin-bottom:10px">
             	<label class="textbox-label" style="text-align: left;">
        				是否可用:
        			</label>
           			 <input class="easyui-radiobutton" name="available" value="1">&nbsp;&nbsp;可用&nbsp;&nbsp;
           			 <input class="easyui-radiobutton" name="available" value="0">&nbsp;&nbsp;不可用&nbsp;&nbsp;
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveMenu()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
    </div>
	
	<!-- 添加和修改用户的弹出层 结束-->
	  	
  	<script type="text/javascript">
  	function zTreeOnClick(event, treeId, treeNode) {
    	$("#table").datagrid({
    		url:"${ctx}/menu/loadAllMenu.action?id="+treeNode.id
    	});
	};
	var setting = {
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: zTreeOnClick
		}
	};
	$(document).ready(function(){
		initTree();
	});
	function initTree(){
		$.post("${ctx}/menu/loadMenuTree.action?available=1",function(zNodes){
			$.fn.zTree.init($("#menuTree"), setting, zNodes);
		});
	}
	//加载表格数据
	$("#table").datagrid({
		singleSelect:true,
		collapsible:true,
        pagination:true,
        rownumbers:true,
        toolbar:'#tb',
        url:'${ctx}/menu/loadAllMenu.action',
        columns:[[
                  {field:'id',title:'ID',align:'center',width:50},
                  {field:'pid',title:'父节点ID',align:'center',width:80},
                  {field:'name',title:'菜单名称',align:'center',width:100},
                  {field:'href',title:'菜单地址',align:'center',width:280},
                  {field:'open',title:'是否展开',align:'center',width:100,formatter:function(value){
                	  if(value==0){
                 		 return "<font color=red>不展开</font>"; 
                 	  }else{
                 		  return "<font color=green>展开</font>"; 
                 	  }
                  }},
                  {field:'parent',title:'是否父节点',align:'center',width:100,formatter:function(value){
                	  if(value==0){
                 		 return "<font color=red>否</font>"; 
                 	  }else{
                 		  return "<font color=green>是</font>"; 
                 	  }
                  }},
                  {field:'icon',title:'菜单图标',align:'center',width:220,formatter:function(value){
                	  return "<img src='"+value+"'/>"+value;
                  }},
                  {field:'tabicon',title:'TAB图标',align:'center',width:100},
                  {field:'available',title:'是否可用',align:'center',width:100,formatter:function(value){
                	  if(value==0){
                 		 return "<font color=red>不可用</font>"; 
                 	  }else{
                 		  return "<font color=green>可用</font>"; 
                 	  }
                  }},
                  {field:'target',title:'TARGET',align:'center',width:100}
              ]]
	});
	
	//打开添加用户的弹出层
	var url="";
	$("#addMenu").click(function(){
		$("#dlg").dialog("open").dialog('setTitle','添加菜单');
		$("#fm").form("clear");//清空表格
		//初始化相关数据
		$("#fm").form("load",{
			parent:0,
			open:0,
			available:1
		});
		url="${ctx}/menu/addMenu.action";
	});
	//打开修改的弹出层
	$("#updateMenu").click(function(){
		//得到当前行
		var row=$("#table").datagrid('getSelected');
		if(row){
			$("#dlg").dialog("open").dialog('setTitle','修改菜单');
			//表单数据装载
			$("#fm").form("load",row);
			url="${ctx}/menu/updateMenu.action";
		}else{
			$.messager.show({
				title:'提示',
				msg:'请选中操作行'
			});
		}
	});
	//保存
	function saveMenu(){
		$.messager.progress();	// 显示进度条
		$('#fm').form('submit', {
			url: url,//数据提交地址  user/addCustomer.action
			onSubmit: function(){
				var isValid = $(this).form('validate');//对表单里面的required:true和vailType的数据进行验证
				if (!isValid){
					$.messager.progress('close');	// 如果验证失败关闭进度条
				}
				return isValid;	//返回验证结果
			},
			success: function(obj){//如果提交成功之后回调的方法
				$.messager.progress('close');	// 关闭进度条
                var result = eval('('+obj+')');//把obj的josn字符串转成js认识的json对象
				$.messager.show({
					title:'提示',
					msg:result.msg
				});
				$("#table").datagrid("reload");//刷新数据表格
				//刷新树
				initTree();
				$("#dlg").dialog("close");//关闭弹出层
			}
		});
	}
	//删除用户
	$("#deleteMenu").click(function(){
		//得到当前行
		var row=$("#table").datagrid('getSelected');
		if(row){
			//$.messager.progress();	// 显示进度条
			$.post("${ctx}/menu/queryChildrenNodeById.action",{id:row.id},function(obj){
				if(obj=="0"){
					$.messager.confirm('提示','你确定要删除【'+row.name+'】这个菜单吗?',function(r){
		                if (r){
		                    $.post('${ctx}/menu/deleteMenu.action',{id:row.id},function(result){
		                            $.messager.show({    
		                                title: '提示',
		                                msg: '删除成功'
		                            });
		                            $("#table").datagrid("reload");//刷新表格
		                            initTree();//刷新树
		                    },'json');
		                }
		            });
				}else{
					$.messager.show({
						title:'提示',
						msg:'该菜单有子节点，请先删除子节点'
					});
				}
				// $.messager.progress('close');	// 关闭进度条
			});
		}else{
			$.messager.show({
				title:'提示',
				msg:'请选中操作行'
			});
		}
	});
	
  	</script>
  </body>
</html>
